<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="/js/plugin/layui-v2.3.0/layui/css/layui.css">
	<link rel="stylesheet" href="/css/reset.css">
	<link rel="stylesheet" href="/css/index.css">
	<script src="/js/jquery-2.1.1.min.js"></script>
	<script src="/js/plugin/layui-v2.3.0/layui/layui.js"></script>
	<script src="/js/common.js"></script>
<script>
	$(document).ready(function() {
		$.post("/system/org/dept/selectjson/0",function(res){
			$("#deptid").append("<option value=''></option>");  
			for(var i=0;i<res.length;i++){
				//console.log(res)
				$("#deptid").append("<option value='"+res[i].id+"'>"+res[i].text+"</option>");  
				
			}
	    },"json"); 
		
		initFormSelects("superior","/system/org/user/selectjson","");
		
	    renderForm();//表单重新渲染，要不然添加完显示不出来新的option
	});
	
	//重新渲染表单
	function renderForm(){
	    layui.use('form', function(){
	       var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
	       form.render();
	    });
	}
</script>
</head>
<body style="overflow-y:scroll">
<div class="addemployee-wrap" id="employee-wrap">
	<div class="form-wrap" >
		<form class="layui-form" id="defaultForm" th:action="@{/system/org/user/save}" th:method="post" lay-filter="employee-form">
			<div class="layui-form-item">
			    <label class="layui-form-label"><span class="must-fill">*</span>登录名</label>
			    <div class="layui-input-block">
			      <input type="text" name="userid" id="userid" required  lay-verify="userid" placeholder="" autocomplete="off" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label"><span class="must-fill">*</span>中文名</label>
			    <div class="layui-input-block">
			      <input type="text" name="userName" id="userName" required  lay-verify="username" placeholder="" autocomplete="off" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label"><span class="must-fill">*</span>密码</label>
			    <div class="layui-input-block">
			      <input type="password" name="pwd" id="pwd" required  lay-verify="pwd" placeholder="" autocomplete="off" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label"><span class="must-fill">*</span>确认密码</label>
			    <div class="layui-input-block">
			      <input type="password" name="userPwd" id="userPwd" required  lay-verify="userPwd" placeholder="" autocomplete="off" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">性别</label>
			    <div class="layui-input-block">
			      <input type="radio" name="userSex" value="1" title="男">
			      <input type="radio" name="userSex" value="0" title="女">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label"><span class="must-fill">*</span>手机</label>
			    <div class="layui-input-block">
			      <input type="text" name="phoneNumber" required  lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">邮箱</label>
			    <div class="layui-input-block">
			      <input type="text" name="emailAddress" placeholder="" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">微信</label>
			    <div class="layui-input-block">
			      <input type="text" name="wechat" placeholder="" autocomplete="off" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">部门</label>
			    <div class="layui-input-block">
			      	<select name="city" id="deptid" name="deptid" lay-verify="deptid" xm-select="dept" xm-select-skin="normal" xm-select-type="1">
			      	</select>
			      	<input type="hidden" id="deptids" name="deptids" />
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label"><span class="must-fill">*</span>职务</label>
			    <div class="layui-input-block">
			      <input type="text" name="post" required  lay-verify="post" placeholder="" autocomplete="off" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">上级</label>
			    <div class="layui-input-block">
			      <select name="superior" lay-filter="aihao" id="superior">
			        <option value=""></option>
			      </select>
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">权限</label>
			    <div class="layui-input-block">
			      <select name="interest" lay-filter="aihao">
			        <option value=""></option>
			        <option value="0">写作</option>
			        <option value="1" selected="">阅读</option>
			        <option value="2">游戏</option>
			        <option value="3">音乐</option>
			        <option value="4">旅行</option>
			      </select>
			    </div>
			</div>
			<!-- <div class="layui-form-item">
				<span id="add-power" class="layui-btn layui-btn-normal" style="margin-left:66px;">添加分店权限</span>
			</div> -->
			<div class="layui-form-item" style="">
			    <div class="layui-input-block">
			      <button class="layui-btn layui-btn-normal btn-bg" lay-submit lay-filter="formEmployee" id="submit-btn">提交</button>
			      <a class="layui-btn layui-btn-primary" onclick="closeLayer()">取消</a>
			    </div>
			</div>
		</form>	
	</div>
</div>
</body>

<script>
$(function(){
	
	layui.config({
	        base: '/js/plugin/layui-v2.3.0/layui/' //此处路径请自行处理, 可以使用绝对路径
	    }).extend({
	        formSelects: 'formSelects-v3'
	    }).use(['element',"layer","form",'formSelects'], function(){
			var layer=layui.layer,form = layui.form,formSelects = layui.formSelects;
			form.verify({
			  userid: function(value, item){ //value：表单的值、item：表单的DOM对象
		      	  if(value==""){
			       	  return '登录名不能为空';
			      }
			  }
			  ,post: function(value, item){ //value：表单的值、item：表单的DOM对象
		      	  if(value==""){
			       	  return '职务不能为空';
			      }
			  }
			  ,username: function(value, item){ //value：表单的值、item：表单的DOM对象
			    if(value==""){
			    	return '用户名不能为空';
			    }else if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
			      return '用户名不能有特殊字符';
			    }
			  }
			  ,pwd: function(value, item){ //value：表单的值、item：表单的DOM对象
			     if(value==""){
			     	return '密码不能为空';
			     }
			  }
			  ,userPwd: function(value, item){ //value：表单的值、item：表单的DOM对象
			      var pwd=$("#pwd").val();
				  if(value==""){
				  	  return '确认密码不能为空';
				  }else if(pwd!=value){
					  return '两次密码不一致';
				  }
			  }
			  ,deptid: function(value, item){ //value：表单的值、item：表单的DOM对象
				  var con="";
				  for(var i=0;i<formSelects.value('dept').length;i++){
					  con+=","+formSelects.value('dept')[i].val;
				  }
				  $("#deptids").val(con.substring(1));
			      console.log(formSelects.value('dept'))
			  }
			  
			}); 
			/* //添加权限；
			$("#add-power").on("click",function(){
				parent.addPower()
			}) */
			//监听提交
			  form.on('submit(formEmployee)', function(data){
				  $.post($("#defaultForm").attr('action'), data.field, function(result) {
						window.parent.layer.msg(result.msg);
						closeLayer();
					}, 'json');
					return false;
			  });
			
		});
})
</script>
</html>